<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键字台">
    <meta name="description" content="描述"> 
    <title>礼品列表</title>
    <link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx}/css/animate.css" rel="stylesheet">
    <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${ctx}/css/plugins/toastr/toastr.min.css">
    <link href="${ctx}/um/themes/default/css/umeditor.css" rel="stylesheet"> 
    <style type="text/css">
    
	.ico_cog {
		position: absolute;
		bottom: 2%;
		right: 2%;
		color: rgba(32, 36, 35, 0.22);
		display: block;
	}
	</style>
</head>
<body class="gray-bg">	
    <div class="wrapper wrapper-content animated fadeInRight">
    	<div class="row">
            <div class="col-sm-12">
                <div class="ibox">
    				<div class="ibox-title">
                        <div class="row">
                           <div class="col-sm-10">
                                <h3>商品列表</h3>
                           </div>
                           <div class="col-sm-2">
                                <div class="ibox-tools">
									<a class="btn btn-success btn-block" style="color:#fff" href="${ctx}/giftManage/giftAddSkip">
									新增商品
									</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
					    
						<div class="wrapper wrapper-content">
							<div class="row animated fadeInRight">
								<c:forEach items="${giftList}" var="gift" varStatus="status">
									<div class="col-md-3">
										<div class="ibox float-e-margins" style="border: 1px solid #e7eaec;">
											<div class="ibox-title" style="background: #F3F3F4;border: 0">
												<h5>${gift.name_}</h5>
											</div>
											<div>
												<div class="ibox-content no-padding border-left-right">
													<div class="relative_image" style="position: relative;height:200px;margin: 20px 0">
														<img alt="image" class="img-responsive" src="${gift.img_}" style="margin: 0 auto;width:200px; height:200px;"> 
															<a class="ico_cog" href="javascript:void(0);" onclick="showGiftImgModal('${gift.id}');">
																<i class="fa fa-cog  fa-2x"></i>
															</a>
													</div>
												</div>
												<div class="ibox-content profile-content">
													
					
													<div class="row">
 														<%--<div class="col-md-12">
															<p>
																<b>总量/剩余：${gift.count}/${gift.remain_count}</b>
															</p>
														</div> --%>
														<div class="col-md-12">
<!-- 															<p> -->
<%-- 																<c:if test="${gift.cost_type==1}"> --%>
<%-- 																	<b class="text-danger"> 中奖概率：${gift.probability}%</b> --%>
<%-- 																</c:if> --%>
<%-- 																<c:if test="${gift.cost_type==0}"> --%>
<!-- 																	<b class="text-danger">&nbsp;</b> -->
<%-- 																</c:if> --%>
<!-- 															</p> -->
														</div>
														<div class="col-md-12">
															<p>
																<i class="fa fa-diamond text-danger"></i> <b
																	class="text-danger">${gift.price_}</b>
															</p>
														</div>
														<%-- <div class="col-md-5">
															<p>
																<i class="fa fa-clock-o"> </i> <b> <fmt:formatDate value="${gift.ValidDateEnd}" pattern="yyyy-MM-dd"/></b>
															</p>
														</div> --%>
													</div>
													<div class="user-button">
														<div class="row">
															<c:if test="${gift.online_ == 1 }">
																<div class="col-md-6">
																	<button type="button" id="edit${status.index}"
																		class="btn btn-success btn-sm btn-block"
																		data-fid="${gift.id}" >
																		<i class="fa fa-edit"></i> 编辑
																	</button>
																</div>
																<div class="col-md-6">
																	<button type="button" id="del${status.index}"
																		class="btn btn-danger btn-sm btn-block"
																		data-did="${gift.id}"  onclick="editimg('${gift.id}')">
																		 编辑轮播图片
																	</button>
																</div>
															</c:if>
															<c:if test="${gift.online_ == 0 }">
																<div class="col-md-6">
																	<button type="button" id="edit${status.index}"
																		class="btn btn-success btn-sm btn-block"
																		data-fid="${gift.id}" >
																		<i class="fa fa-edit"></i> 编辑
																	</button>
																</div>
																<div class="col-md-6">
																	<button type="button" id="del${status.index}"
																		class="btn btn-danger btn-sm btn-block"
																		data-did="${gift.id}" onclick="editimg('${gift.id}')">
																		编辑轮播图片
																	</button>
																</div>
															</c:if>
														</div>
													</div>
													<div class="user-button">
														<div class="row">
															<div class="col-md-6">
																<c:if test="${gift.online_ == 0 }">
																	<a type="button" class="btn btn-primary btn-sm btn-block"																	data-did="${gift.id}"
																		onclick="online('${gift.id}')"> <i
																		class="fa fa-toggle-off"></i> <span>上线</span>
																	</a>
																</c:if>
																<c:if test="${gift.online_ == 1 }">
																	<a type="button" class="btn btn-default btn-sm btn-block"
																		onclick="offline('${gift.id}')"> <i
																		class="fa fa-toggle-on"></i> <span
																		>下线</span>
																	</a>
																</c:if>
															</div>
														</div>
													</div>
					
												</div>
											</div>
										</div>
									</div>
								</c:forEach>
								
							</div>
						</div>
	               </div>
    			</div>
    		</div>
    	</div>
    </div>
	<div class="modal inmodal in" id="myModal" tabindex="-1" role="dialog"
		aria-hidden="true">
		<div class="modal-dialog"  style="width:100%;">
			<div class="modal-content animated fadeIn">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span><span class="sr-only">Close</span>
					</button>
					<h2 class="modal-title">礼品编辑</h2>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="updGift" method="POST">
						<input type="hidden" class="form-control" name="id" id="updGiftId">
						<div class="form-group">
							<label class="col-sm-3 control-label">名称：</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" name="gift_name" maxlength="50">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">价格：</label>
							<div class="col-sm-8">
								<input type="text" class="form-control" name="cost" maxlength="8">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">礼品介绍：</label>
							<div class="col-sm-8">
								<!-- <textarea type="text" class="form-control" name="gift_describe"></textarea> -->
								<script type="text/plain" id="myEditor" style=""></script>
							</div>
						</div>
						
<!-- 						<div class="form-group"> -->
<!-- 							<label class="col-sm-3 control-label">礼品详情图：</label> -->
<!-- 							<div class="col-sm-8"> -->
<!-- 								<input type="file" name="details_img" id="details_img" accept="image/png,image/jpg,image/jpeg,image/gif,image/bmp" -->
<!-- 									onchange='PreviewDetails_img(this)' style="padding-top: 5px;" /> <input -->
<!-- 									type="button" class="btn btn-danger btn-xs" value="移除" -->
<!-- 									style="display: none; margin: 10px;" -->
<!-- 									onclick="removeDetails_img(1)" id="removeDetails_imgBtn" /> -->

<!-- 							</div> -->
<!-- 						</div> -->
<!-- 						<div class="form-group"> -->
<!-- 							<label class="col-sm-3 control-label"></label> -->
<!-- 							<div class="col-sm-8"> -->
<!-- 								<p>*最佳展示效果图片，如：640*300; 图片名称不能超过20个字符;</p> -->
<!-- 							</div> -->
<!-- 						</div> -->
						<div class="form-group">
							<label class="col-sm-3 control-label"></label>
							<div class="col-sm-8">
								<div id="details_imgPreview" style="float: left">
									<div id="details_imgDiv" style="diaplay:none">
										<!-- <img src="" id="uploadDetails_img" width="150px" height="100px"  />
										 <input type="hidden" name="details_img_" id="details_img_"  /> 
										 <input type="button" class="btn btn-danger btn-xs" value="移除"
										onclick="removeDetails_img(2)"style="margin-left: 10px"  /> -->
									</div>
								</div>
							</div>
						</div>
						
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" data-flg="0">保存</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal inmodal fade" id="myModal6" tabindex="-1"
		role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-body">
					<h3>确认删除该条礼品记录么？</h3>
				</div>
				<div class="modal-footer">
					<form class="form-horizontal" id="delGift" method="post">
						<input type="hidden" name="id" id="delGiftId" />
						<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" data-flg="0">确认</button>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="modal inmodal fade" id="updGiftImgModal" tabindex="-1"
		role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
			<form class="form-horizontal" id="updGiftImg" method="post"
						action="${ctx}/giftManage/giftImgUpd" enctype="multipart/form-data">
				<div class="modal-header">
					<h3>更换礼品图片</h3>
				</div>
				<div class="modal-body">
						
						<div class="form-group">
							<label class="col-sm-3 control-label">图片：</label>
							<div class="col-sm-8">
								<input type="file" name="fileImage" id="fileImage" accept="image/png,image/jpg,image/jpeg,image/gif,image/bmp"
									onchange='PreviewImage(this)' style="padding-top: 5px;" /> <input
									type="button" class="btn btn-danger btn-xs" value="移除"
									style="display: none; margin: 10px;"
									onclick="removeImage(1)" id="removeImageBtn" />								
							
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label"></label>
							<div class="col-sm-8">
								<p>*最佳展示效果需正方型图片，如：200*200; 图片名称不能超过20个字符;</p>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label"></label>
							<div class="col-sm-8">
								<div id="imgPreview" style="float: left"></div>
							</div>
						</div>
				</div>
				<div class="modal-footer">
					<input type="hidden" name="id" id="GiftImgId" />
					<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" data-flg="0" onclick="updateImg()">确认</button>
				</div>
				</form>
			</div>
		</div>
	</div>

	<!-- 全局js -->
    <script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
	<!-- 自定义js -->
	<script src="${ctx}/js/common.js"></script>
	<script src="${ctx}/js/jquery.validate.min.js"></script>
	<script src="${ctx}/js/plugins/toastr/toastr.min.js"></script>
	<script src="${ctx}/js/plugins/layer/layer.min.js"></script>
	<script charset="utf-8" src="${ctx}/um/umeditor.js"> </script>
    <script charset="utf-8" src="${ctx}/um/umeditor.config.js"></script>
	<script type="text/javascript">
	
	function editimg(id){
		window.location.href = "${ctx}/img/toImgManagerPage?id="+id;
	}
	function online(id){
		$.ajax({
			url:"${ctx}/giftManage/onlineStatus",
			data:{id:id,status:1},
			dataType:"json",
			success : function(){
				location.reload();
			}
		})
	}
	function offline(id){
		$.ajax({
			url:"${ctx}/giftManage/onlineStatus",
			data:{id:id,status:0},
			dataType:"json",
			success : function(){
				location.reload();
			}
		})
	}
	
	toastr.options = {
			  "closeButton": false,
			  "debug": false,
			  "progressBar": false,
			  "positionClass": "toast-top-center",
			  "onclick": null,
			  "showDuration": "400",
			  "hideDuration": "1000",
			  "timeOut": "2000",
			  "extendedTimeOut": "1000",
			  "showEasing": "swing",
			  "hideEasing": "linear",
			  "showMethod": "fadeIn",
			  "hideMethod": "fadeOut"
			};
			
		
		$(function(){ 
			var um = UM.getEditor('myEditor');
			
			
			$('#costType').change(function(){ 
				var temp = $(this).children('option:selected').val(); 
				if(temp==0){
					$("#probabilityArea").hide();
					//$("#probability").val(0);
				}else{
					$("#probabilityArea").show();
				}
				});
			
			$('.relative_image').hover(
					  function () {
			    $(this).children().children('i').css({'color':'#645E5E'});
					  },
					  function () {
						  $(this).children().children('i').css({'color':'rgba(32, 36, 35, 0.22)'});
					  }
					);
			
			//更新礼品添加表单验证
			$("#updGift").validate({
				rules:{
					gift_name:{
						required:true,
						maxlength:50
					},
					cost:{
						required:true
					}
					
				},
				messages: {
					gift_name: {
		                required: "请输入礼品名称",
		                maxlength:"礼品名称不能超过20个字符"
		            },
		            cost: {
		                required: "请输入耗费积分"
		            },
		            probability: {
		            	required: "概率不能为空",
						number:"请输入大于等于0的数字",
						min : "最小值为不能低于0",
						max : "最大值不能超过100%"
		            }
				}
			});

			jQuery.validator.addMethod("balance", function(value,element) {
				var count=$("#counts").val();
				var remain_count=$("#remain_count").val();
				//alert(count-remain_count >=0);		
				return count-remain_count >=0; 
			}, $.validator.format("剩余数量不能大于输入总量"));
			
			
			
		//更新获取所需修改ID的所对应的gift的信息
			$('.col-md-6').on("click", "button", function () {
//				alert($(".col-md-4 .user-button a:last ").data('did'));
				var fid = $(this).data('fid');
				var did = $(this).data('did');
				if(typeof(fid)!== 'undefined'){
					$.ajax({
						type:"POST",
						url: 'giftUpdSkip',
						dataType:'json',
						data:"id="+fid,
						success:function(data){
							$("#updGiftId").attr("value",data.giftInfo.id);
							$("#myModal :text")[0].value = data.giftInfo.name_;
							$("#myModal :text")[1].value = data.giftInfo.price_;
							$("#myEditor").html(data.giftInfo.desc_);
						},error: function(e){ 
							toastr.error(e);
			            }
					});
					$('#myModal').modal();
				}else if(typeof(did)!== 'undefined'){
					//alert("del:"+did);
					$("#delGiftId").data("delid",did);
					$('#myModal6').modal();
				}
				});
			

			
		//更新信息
			$("#myModal").on("click", "button", function(){
				if($(this).data('flg')=="0"){
					if($("#updGift").valid()){
						var formdata = new FormData($('#updGift')[0]);
						var gift_describe = UM.getEditor('myEditor').getContent();
						formdata.append('gift_describe',gift_describe);
						$.ajax({
							type:"POST",
							url: 'giftUpd',
							data:formdata,
							processData: false,
						   	  contentType: false,
							success:function(data){
								console.info(data.msg);
								if(data.msg.state == 0){
									window.location.reload();
								}else{
									toastr.error(data.msg.message);
								}					
							},error: function(e){ 
								toastr.error(e);
				            }
						});
						$('#myModal').modal("hide");
					}
				}
			    
			});
			
		//删除信息
			$('#myModal6').on("click", "button", function () {
				if($(this).data('flg')=="0"){
					var did = $("#delGiftId").data('delid');
					//$("#delGiftId").attr("value",did);
					//var path = "giftDel";  
				    //$('#delGift').attr("action", path).submit();
					$.ajax({
						type:"POST",
						url: 'giftDel',
						dataType:'json',
						data:"id="+did,
						success:function(data){
							//console.info(data.msg);
							//alert(data.msg.message);
							if(data.msg.state == 0){
								window.location.reload();
							}else{
								toastr.error(data.msg.message);
							}
						},error: function(e){ 
							toastr.error(e);
			            }
					});
				}
				$('#myModal6').modal("hide");
			});
			
		});

//更新图片
	function updateImg(){
		var file = document.getElementById("fileImage").value;
		if(file == "" || file == "undefined"){
			layer.msg("请选择图片");
			return;
		}
		var id = $('#GiftImgId').val();
		var formdata = new FormData($('#updGiftImg')[0]);
		formdata.append('id',id);
		$.ajax({  
	       	url:'giftImgUpd',
	       	data: formdata,
		   	  type :"post",
		   	  processData: false,
		   	  contentType: false,  
/* 	       	data:{"id":id},//附带上传的数据
	       	dataType: 'json' */
				success: function (result){
					//alert(result.message);
					if(result.state == 0){
						window.location.reload();
					}else{
						layer.msg(result.message);
					}
				},error: function(result){ 
					layer.msg("Connection error!");
	            }
			});
	}

//修改上线下线的状态
	function statusChange(index,id){
	    var status = $("#isPutaway"+index).val(); 
		$.ajax({
			type:"POST",
			url: 'onlineStatus',
			data:"id="+id+"&status="+status,
			success:function(data){
				if(data.msg.state == 0){
					toastr.success(data.msg.message);
					if(data.msg.data == '0'){
						$('#onlineStatus'+index).text("下线");
						$("#isPutaway"+index).attr("value",data.msg.data);	
						$("#del"+index).attr("disabled",'disabled');
						$("#edit"+index).attr("disabled",'disabled');
						$("#online"+index+" .fa").removeClass("fa-toggle-off");
						$("#online"+index+" .fa").addClass("fa-toggle-on");
						$("#online"+index).removeClass("btn-danger");
						$("#online"+index).addClass("btn-default");
					}else if(data.msg.data == '1'){
						$('#onlineStatus'+index).text("上线");
						$("#isPutaway"+index).attr("value",data.msg.data);
						$("#del"+index).removeAttr("disabled");
						$("#edit"+index).removeAttr("disabled");
						$("#online"+index+" .fa").removeClass("fa-toggle-on");
						$("#online"+index+" .fa").addClass("fa-toggle-off");
						$("#online"+index).removeClass("btn-default");
						$("#online"+index).addClass("btn-danger");
					}
				}else{
					toastr.error(data.msg.message);
				}		
			},error: function(e){ 
				toastr.error(e);
	        }
		});	
	};

	//更换礼品图片
	function showGiftImgModal(id){
		$("#GiftImgId").attr("value",id);
		$("#updGiftImgModal").modal('show');
	}
	
	//预览图片
	function PreviewImage(imgFile) {
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
		if (!pattern.test(imgFile.value)) {
			//$('#alertModal').modal('show')
			layer.msg("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！") ;
			imgFile.focus();
			document.getElementById("fileImage").value = "";
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("imgPreview").innerHTML = "";
				document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
				document.getElementById("imgPreview").innerHTML = "<img src='"+path+"' width='100px' height='100px'/>";
				document.getElementById("removeImageBtn").style.display = "";
				//document.getElementById("uploadImage").style.display = "none";
				//document.getElementById("imageDiv").style.display = "none";
				//document.getElementById("productImage").value = null;
	
			}
		}
	}
	
	//移除预览图片
	function removeImage(sign) {
		if (sign == 1) {
			document.getElementById("imgPreview").innerHTML = "";
			document.getElementById("removeImageBtn").style.display = "none";
			document.getElementById("fileImage").value = "";
		} else {
			document.getElementById("imageDiv").style.display = "none";
			document.getElementById("productImage").value = null;
		}
	}

	function PreviewDetails_img(imgFile) {
		var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
		if (!pattern.test(imgFile.value)) {
			//$('#alertModal').modal('show')
			layer.msg("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！") ;
			imgFile.focus();
			document.getElementById("details_img").value = "";
		} else {
			var path;
			if (document.all)//IE 
			{
				imgFile.select();
				path = document.selection.createRange().text;
				document.getElementById("details_imgPreview").innerHTML = "";
				document.getElementById("details_imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
						+ path + "\")";//使用滤镜效果 
			} else//FF 
			{
				path = URL.createObjectURL(imgFile.files[0]);
				var div = document.createElement("div");
				var img = new Image();
				img.src = path;
				img.width = "150";
				img.height = "100";
				div.appendChild(img);
				document.getElementById("details_imgPreview").appendChild(div);
				document.getElementById("removeDetails_imgBtn").style.display = "";
				//document.getElementById("uploadDetails_img").style.display = "none";
				//document.getElementById("details_imgDiv").style.display = "none";
				//document.getElementById("productDetails_img").value = null;

			}
		}
	}

	function removeDetails_img(sign) {
		if (sign == 1) {
			document.getElementById("details_imgPreview").innerHTML = "";
			document.getElementById("removeDetails_imgBtn").style.display = "none";
			document.getElementById("details_img").value = "";
		} else {
			document.getElementById("details_imgDiv").style.display = "none";
			document.getElementById("details_img_").value = null;
		}
	}
	</script>
</body>
</html>